<style scoped>

.title {
  margin-right: auto;
}

.button {
  margin-left: auto;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 2px;
}

</style>

<template>
  <div id="window4">

    <!-- 头部：标题 -->
    <div style="padding: 5px">
      <el-row>
        <!--        标题-->
        <el-col :span="13" style="text-align: right;">智力分析</el-col>
        <!--        关闭按钮-->
        <el-col :span="11" style="text-align: right;">
          <div>
            <el-popconfirm title="是否关闭该窗口" @confirm="closeWindow">
              <template #reference>
                <el-icon>
                  <CircleClose/>
                </el-icon>
              </template>
            </el-popconfirm>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- 次标题 -->
    <div style="display: flex; justify-content: space-between;margin: 0 10px">
      <div style="flex: 1;text-align: left;">地区：甘肃</div>
      <div style="flex: 1; text-align: right;">时间段：2018-06-14</div>
    </div>

    <!-- 主体：信息表格 -->
    <div style="margin-top: 10px;">
      <div v-for="o in 3" :key="o" class="text item" style="overflow: hidden; box-sizing: border-box; height: 20%;">
        <el-card shadow="hover"
                 style="margin: 0px 10px;padding-bottom: 10px;background-color: rgba(0, 0, 0, 0.3); color: white;">
          <div style="display: flex; justify-content: space-between;">
            <div style="flex: 1;text-align: left;">康定市公安局</div>
            <div style="flex: 1; text-align: right;">2018-06-22</div>
          </div>
          <div style="text-align: left;padding-top: 10px">
            村民王某因为被隔壁邻居的狗咬了，产生了纠纷，村民报警。
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>


<script setup>
import { defineEmits } from 'vue'

const emit = defineEmits()

const closeWindow = () => {
  emit('closeWindow')
}
</script>